<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="16" :offset="8">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                      <el-input placeholder="按照楼宇搜索" v-model="param.numbers"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                      <el-button type="primary" @click="queryBuildByNuminfo">查询</el-button>
                      <el-button type="danger">清空</el-button>
                    </el-form-item>
                  </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="addBuildForm=true">添加</el-button>
                <el-button type="danger" @click="batchDelBuild">批量删除</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <template>
                    <el-table
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>

                    <el-table-column
                      prop="numbers"
                      label="楼号"
                      >  
                    </el-table-column>

                    <el-table-column
                      prop="remarks"
                      label="备注"
                      >
                    </el-table-column>

                    <el-table-column
                      prop="createTime"
                      label="创建时间"
                      >
                    </el-table-column>

                    <el-table-column
                    prop="modifyTime"
                    label="修改时间"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="operator"
                    label="操作人"
                    >
                  </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="updateBulid(scope.row.id)">修改</el-button>
                                <el-button type="danger" @click="delBuild(scope.row.id)">删除</el-button>
                            </template>

                        </el-table-column>
                  </el-table>
                  </template>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">    
                <el-pagination
                background
                :page-sizes="[3, 5, 10, 30]"
                :page-size='pageSize'
                :current-page="pageNum"
                layout="prev, pager, next,total,sizes"
                :total="total"
                @next-click="nextPage"
                @prev-click="prevPage"
                @current-change="changePage"
                @size-change="changeSize">
                </el-pagination>
            </el-col>
        </el-row>


        <!--     新增的弹窗开始-->
        <el-dialog title="新增楼栋" :visible.sync="addBuildForm">
            <el-form>
                <el-form-item label="楼号" label-width="80px">
                    <el-input v-model="addBuildInfo.numbers"></el-input>
                </el-form-item>


                <el-form-item label="操作人" label-width="80px">
                    <el-input v-model="addBuildInfo.operator"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="addBuildInfo.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addBuildForm=false">取 消</el-button>
                <el-button @click="saveBuild">确 定</el-button>
            </div>
        </el-dialog>
        <!--     新增的弹窗结束-->

<!--            修改的弹窗开始-->
        <el-dialog title="修改信息" :visible.sync="updateBulidForm">
            <el-form>
                <el-form-item label="楼号" label-width="80px">
                    <el-input v-model="selectBuildId.numbers"></el-input>
                </el-form-item>


                <el-form-item label="操作人" label-width="80px">
                    <el-input v-model="selectBuildId.operator"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="selectBuildId.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateBulidForm=false">取 消</el-button>
                <el-button @click="saveupdateBuild">确 定</el-button>
            </div>
        </el-dialog>
<!--        修改的弹窗结束-->


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>是否确定删除</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDelBuild">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                tableData: [

                    ],
                param: {
                    numbers:''
                },
                pageSize:5,
                pageNum:1,
                total:0,
                addBuildForm:false,
                updateBulidForm:false,
                dialogVisible:false,
                addBuildInfo:{},
                selectData:[],
                selectBuildId:{},
                delId:''
                },
            methods:{
                queryBuildByNum(){
                    let pageData={}
                    pageData.pageSize=this.pageSize
                    pageData.pageNum=this.pageNum
                    pageData.param=this.param
                    axios.post('/building/queryBuildByNum',pageData)
                        .then(resp=>{
                            if(resp.data.code==200){
                                this.tableData=resp.data.data.list
                                this.total=resp.data.data.total
                            }


                        })
                },
                queryBuildByNuminfo(){
                    this.pageNum=1
                    this.queryBuildByNum()
                },
                saveBuild(){
                    this.addBuildForm=true
                    axios.post('/building/addBuild',this.addBuildInfo)
                        .then(resp=>{
                            if(resp.data.code==200){
                                this.queryBuildByNum()
                                this.addBuildForm=false
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，添加成功',
                                    type: 'success'
                                });
                            }
                        })
                },
                handleSelectionChange(val){
                    console.log(val)
                    this.selectData=val
                },
                batchDelBuild(){
                    //批量删除
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //发送删除请求
                        // 怎么得到选中的id数组
                        let ids=[]
                        this.selectData.forEach(e=>{
                            ids.push(e.id)
                        })
                        axios.post('/building/batchDelBuild',ids)
                            .then(resp=>{
                                if(resp.data.code==200){
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    this.queryBuildByNuminfo()
                                }

                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                updateBulid(id){
                    this.updateBulidForm=true
                    axios.get("/building/selectBuildById/"+id).then(resp=>{
                        if(resp.data.code==200){
                            this.selectBuildId=resp.data.data
                        }
                    })
                },
                saveupdateBuild(){
                    axios.post('/building/saveupdateBuild',this.selectBuildId).then(resp=>{
                        if(resp.data.code==200){
                            this.updateBulidForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，更改成功',
                                type: 'success'
                            });
                            this.queryBuildByNum()
                        }
                    })
                },


                delBuild(id){
                    this.dialogVisible=true
                    this.delId=id
                },
                saveDelBuild(){
                    axios.get('/building/saveDelBuild/'+this.delId).then(resp=>{
                        if(resp.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.dialogVisible = false
                            this.queryBuildByNuminfo()
                        }
                    })
                },

                //下一页方法
                nextPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryBuildByNum()
                },
                //上一页方法
                prevPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryBuildByNum()
                },
                changePage(val){
                    this.pageNum=val
                    this.queryBuildByNum()
                },
                changeSize(val){
                    this.pageNum=1
                    this.pageSize=val
                    this.queryBuildByNum()
                },

            },
            created(){
                this.queryBuildByNuminfo()
            }
        })
    </script>
</body>
</html>